<template xmlns:el-form="http://www.w3.org/1999/html">
    <div class="center-box">
        <!--  首行 -->
        <div class="center-middle">
            <div class="shang-top">
                <span style="display: inline-block;float: left;padding-left: 20px;">用户列表</span>
                <div style="display: inline-block;float: right;padding-right: 20px;">
                    <button style="background-color: #fff;margin-right: 15px;border: 1px solid #eee;height: 30px; line-height: 30px; width: 58px;">
                        <i class="el-icon-refresh"></i>&nbsp&nbsp刷新
                    </button>
                    <button style="background-color: #fff;margin-right: 15px;border: 1px solid #eee;height: 30px; line-height: 30px; width: 58px;">
                        <i class="el-icon-arrow-left"></i>&nbsp&nbsp返回
                    </button>
                </div>
            </div>
            <!--表格头部工具栏-->
            <div class="center-table">
                <div class="center-table-one">
                <span style="display: inline-block;float: left;">
                    <i class="el-icon-s-unfold"></i>数据列表
                </span>
                </div>
            </div>
            <!--  实现表格 -->
            <div class="center-table-two">
                <el-table
                        :model="form"
                        :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
                        border
                        type="selection"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="Id"
                            align="center">
                    </el-table-column>
                    <el-table-column prop="trueName" label="用户名字" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                    <el-table-column prop="account" label="账号" align="center"></el-table-column>
                    <el-table-column prop="avatar" label="头像">
                        <template>
                            <img :src="require('../assets/guolei.jpg')" alt=""width="40" height="40">
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮件" align="center"></el-table-column>
                    <el-table-column prop="password" label="用户密码" align="center"></el-table-column>
                    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                    <el-table-column prop="enabled" label="是否启用" align="center"></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="idCard" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="birthDate" label="出生日期" align="center"></el-table-column>
                    <el-table-column prop="freestyle" label="签名" align="center"></el-table-column>
                    <el-table-column prop="registerDate" label="注册时间" align="center"></el-table-column>
                    <el-table-column prop="registerIp" label="注册ip" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" align="center"></el-table-column>
                    <el-table-column prop="grade" label="等级" align="center"></el-table-column>
                    <el-table-column prop="wages" label="工资" align="center"></el-table-column>
                    <el-table-column prop="region" label="地区" align="center"></el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="130">
                        <template slot-scope="scope">
                            <template>
                                <el-button type="text" @click="editRow(scope.row)" class="btn">查看</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 查看对话框-->
                <el-dialog
                        width="80%"
                        title="用户详情"
                        :visible.sync="dialogFormVisible01"
                        append-to-body>
                    <el-row>
                        <el-form :label-position="labelPosition01" label-width="50px" :model="forms">
                            <el-col :span="7">
                                <el-form-item label="用户名字:" :label-width="formInter">
                                    <el-input v-model="forms.trueName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="性别:" :label-width="formInter">
                                    <el-input v-model="forms.sex"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="账号" :label-width="formInter">
                                    <el-input v-model="forms.account"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="头像" :label-width="formInter">
                                    <el-input v-model="forms.avatar"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="邮件" :label-width="formInter">
                                    <el-input v-model="forms.email"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="密码" :label-width="formInter">
                                    <el-input v-model="forms.password"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="备注" :label-width="formInter">
                                    <el-input v-model="forms.remark"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="是否启用" :label-width="formInter">
                                    <el-input v-model="forms.enabled"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="手机号" :label-width="formInter">
                                    <el-input v-model="forms.phone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="身份证号" :label-width="formInter">
                                    <el-input v-model="forms.idCard"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="出生日期" :label-width="formInter">
                                    <el-input v-model="forms.birthDate"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="签名" :label-width="formInter">
                                    <el-input v-model="forms.freestyle"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="注册时间" :label-width="formInter">
                                    <el-input v-model="forms.registerDate"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="注册Ip" :label-width="formInter">
                                    <el-input v-model="forms.registerIp"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="状态" :label-width="formInter">
                                    <el-input v-model="forms.status"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="等级" :label-width="formInter">
                                    <el-input v-model="forms.grade"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="工资" :label-width="formInter">
                                    <el-input v-model="forms.wages"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="地区" :label-width="formInter">
                                    <el-input v-model="forms.region"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </el-dialog>
                <!--分页-->
                <div class="page-box" style="float: right;">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[1,2,3,4,5,6,7,8,9,10]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Account",
        data(){
            return{
                dialogFormVisible01:false,
                labelPosition01:"top",
                forms:{
                    trueName:"",
                    sex:"",
                    account:"",
                    avatar:"",
                    email:"",
                    password:"",
                    remark:"",
                    enabled:"",
                    phone:"",
                    idCard: "",
                    birthDate: "",
                    freestyle: "",
                    registerDate:"",
                    registerIp:"",
                    status:"",
                    grade:"",
                    wages:"",
                    region:"",

                },
                form:{
                    registerDate:"",
                    registerIp:"",
                    status:"",
                    region:""
                },
                //分页
                currentPage:1,
                currentIndex:" ",
                pagesize:2,
                //弹出框
                formInter:'100px',

                //table组件
                tableData: [],
                tableData3:[],
                //复选框
                multipleSelection: []
            }
        },
        //实现表格中的全查
        mounted(){
            //表中的全查
            this.getAll();
        },
        methods:{
            //分页
            handleSizeChange(val){
                this.pagesize = val;
                console.log('每页 ${val} 条');
            },
            handleCurrentChange(val){
                this.currentPage = val
            },
            //全查
            getAll(){
                this.$http.post('/user/getUser').then(res =>{
                    this.tableData = res.data;
                })
            },
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            editRow(item){
                this.dialogFormVisible01 = true
                this.forms = {
                    trueName:item.trueName,
                    sex:item.sex,
                    account:item.account,
                    avatar:item.avatar,
                    email:item.email,
                    password:item.password,
                    remark:item.remark,
                    enabled:item.enabled,
                    phone:item.phone,
                    idCard:item.idCard,
                    birthDate:item.birthDate,
                    freestyle:item.freestyle,
                    registerDate:item.registerDate,
                    registerIp:item.registerIp,
                    status:item.status,
                    grade:item.grade,
                    wages:item.wages,
                    region:item.region,
                }
            },
            add(){

            }
        }
    }
</script>

<style long="less" scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .center-box{
        width: 1500px;
    }
    .shang-top,.shang-middle{
        margin-top: 2px;
        margin-bottom: 20px;
        width: 115%;
        background: #F3F3F3;
        height: 45px;
        line-height: 45px;
        float: left;
    }
    .center-table-one{
        width: 115%;
        float: left;
        background: #F3F3F3;
        height: 45px;
    }
    .center-table-one span{
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
    }
    .center-table-one div{
        padding-right: 15px;
    }
    .center-table-two{
        width: 115%;
    }
    .center-tree-one{
        float: left;
        background-color: #F2F2F2;
        width: 300px;
        height: 45px;
        line-height: 45px;
        padding-left: 15px;
    }
</style>
